<template>
  <div>
    <div class="stuform">
      <div>
        <el-input placeholder="邮箱" v-model="addObj.addemail"></el-input
        ><el-input placeholder="姓名" v-model="addObj.adduserName"></el-input
        ><el-input placeholder="手机号" v-model="addObj.addphone"></el-input>
        <el-button v-power type="primary" @click="addStu">添加</el-button>
      </div>
      <div>
        <el-input placeholder="邮箱" v-model="email"></el-input
        ><el-input placeholder="姓名" v-model="userName"></el-input
        ><el-input placeholder="手机号" v-model="phone"></el-input>
        <el-button type="success" @click="toSearch">查询</el-button>
      </div>
    </div>
    <table-title width="80%" title-text="学员列表"> </table-title>
    <div class="stuTable">
      <el-table border stripe :data="studentList">
        <el-table-column label="用户名" prop="userName"> </el-table-column>
        <el-table-column label="邮箱" prop="email"> </el-table-column>
        <el-table-column label="手机号" prop="phone"> </el-table-column>
        <el-table-column label="注册日期">
          <template slot-scope="scope">
            <div>
              {{ new Date(scope.row.createAt).toLocaleString() }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否冻结">
          <template slot-scope="scope">
            <div>
              <el-link>{{ scope.row.isstate ? '已冻结' : '可用' }}</el-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-link
                v-power
                @click="toFreeze(scope.row.tokenId)"
                :type="scope.row.isstate ? 'success' : 'danger'"
                >{{ scope.row.isstate ? '解冻' : '冻结' }}</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev,pager,next"
        :page-size="pageSize"
        :total="count"
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { _addStudent, _getStudent, _freezeeStudent } from '../../api/student'
export default {
  data () {
    return {
      studentList: [],
      count: 0,
      pageSize: 3,
      addObj: {
        //添加的v-model数据
        addemail: '',
        adduserName: '',
        addphone: ''
      },
      pageStart: 1, //当前页码
      userName: '', //查询的用户名
      email: '', //查询的邮箱
      phone: '' //查询的手机号
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async toFreeze (tokenId) {
      //冻结
      var res = await _freezeeStudent(tokenId)
      console.log(res)
      if (res.data.success) {
        this.$message.success('操作成功')
        this.getList()
      }
    },
    pageChange (val) {
      //分页
      this.pageStart = val
      this.getList()
    },
    toSearch () {
      //搜索
      this.getList()
      this.userName = ''
      this.phone = ''
      this.email = ''
    },
    async getList () {
      //获取学员列表
      var res = await _getStudent({
        pageStart: this.pageStart,
        userName: this.userName,
        email: this.email,
        phone: this.phone
      })
      console.log(res)
      this.studentList = res.data.data.list

      this.count = res.data.data.count
      this.$store.commit('setStudentCount', res.data.data.count)
      this.pageSize = res.data.data.pageSize
    },
    async addStu () {
      //添加学员
      if (
        this.addObj.adduserName &&
        this.addObj.addemail &&
        this.addObj.addphone
      ) {
        var res = await _addStudent(this.addObj)
        console.log(res)
        if (res.data.success) {
          this.$message.success('添加成功')
          this.addObj.adduserName = ''
          this.addObj.addemail = ''
          this.addObj.addphone = ''
        }
      } else {
        this.$message.error('添加学员数据不能为空')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.stuform {
  width: 80%;
  > div {
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    justify-content: space-between;
    /deep/ .el-input {
      width: 300px;
    }
  }
}
.stuTable {
  width: 80%;
}
</style>
